<template>
	<view class="contain">
		<view class="title">
			大学生成绩管理与选课系统
		</view>
		<view class="form">
			<view class="username">
				<u--input placeholder="请输入用户名" border="" v-model="username" clearable></u--input>
			</view>
			<view class="password">
				<u--input placeholder="请输入密码" border="" v-model="password" type="password" clearable>
				</u--input>
			</view>

			<view class="button">
				<u-button type="error" text="登陆" @click="handleToLogin" :loading="loading">

				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'; // 引入api

	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				username: "",
				password: "",
				loading: false
			}
		},
		onLoad() {
			let roleId = uni.getStorageSync('roleId')
			let tabBarList = uni.getStorageSync('tabBarList')
			let token = uni.getStorageSync('token')
			if (roleId !== "" && tabBarList !== "" && token !== "") {
				console.log("已登陆")
				if (roleId == 0) {
					uni.switchTab({
						url: "../student/home"
					})
				} else if (roleId == 1) {
					uni.switchTab({
						url: "../teacher/home"
					})
				} else if (roleId == 2) {
					uni.switchTab({
						url: "../worker/home"
					})
				}
			}
		},
		methods: {
			handleToLogin() {
				console.log("登陆");
				this.loading = true
				// 判断字段信息

				// 打包字段
				let pwdParams = {
					username: this.username,
					password: this.password
				}
				// 向后端发送请求
				api.pwdLogin(pwdParams).then(res => {
					this.loading = false
					if (res.code === 1) {
						let data = res.data
						this.setToken(data.token)
						uni.showModal({
							content: data.message,
							showCancel: false,
							success: () => {
								console.log(data)
								let roleId = data.RoleId
								console.log(roleId)
								this.setRoleId(roleId)

								if (roleId == 0) {
									uni.switchTab({
										url: "../student/home"
									})
								} else if (roleId == 1) {
									uni.switchTab({
										url: "../teacher/home"
									})
								} else if (roleId == 2) {
									uni.switchTab({
										url: "../worker/home"
									})
								}
							}
						})

					} else if (res.code === 0) {
						uni.showModal({
							showCancel: false,
							content: res.errors
						})
					}


				}).catch(err => {
					this.loading = false
					uni.showModal({
						showCancel: false,
						content: err.message
					})
				});



			},

			...mapMutations(['setRoleId', 'setToken']),

		},
		components: {

		}
	}
</script>

<style lang="less">
	.contain {
		// color: #a62618;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title {
			width: 100%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			font-size: 24px;
			margin-top: 30px;

		}

		.form {
			margin-top: 30px;
			width: 90%;
			border-radius: 20rpx;

			border: none;
			box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
			border-radius: 5px;
			// background-color: #0077AA;
			// height: 400px;

			// background-color: #ccc;
			.username {
				box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				margin: 50px 30rpx;
			}

			.password {
				box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				border-radius: 5px;
				margin: 50px 30rpx;
			}

			.button {
				margin: 50px 30rpx;
				box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				-webkit-box-shadow: 0 12px 5px -10px rgba(0, 0, 0, 0.3), 0 0 4px 0 rgba(0, 0, 0, 0.3);
				border-radius: 5px;
			}
		}
	}
</style>
